<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-top-bottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">{{this.$store.state.city}}</div>
            <div style="display: none;">{{this.$store.state.id}}</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-top-bottom">城市列表</div>
        <single-tree :areaList="areaList"></single-tree>
      </div>
    </div>
  </div>
</template>

<script>
// 切记，此处的BS两个字母必须大写;
// import vuescroll from 'vuescroll'
import SingleTree from './SingleTree'
import GLOBAL from '@/api/global_variable'
import axios from 'axios'
export default {
  name: 'CityList',
  components: {
    SingleTree
  },
  // 在dom页面加载完毕之后执行；
  mounted () {
    this.getAreaList()
  },
  data () {
    return {
      ip: GLOBAL.ip,
      userId: null,
      roleId: null,
      areaList: []
    }
  },
  created () {
    // 获取链接参数值，然后存进内存中
    this.userId = this.$route.query.userId
  },
  methods: {
    // 读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === 'userName') {
            this.userNameValue = arr2[1] // 保存到保存数据的地方
          } else if (arr2[0] === 'userPwd') {
            this.passWordValue = arr2[1]
          } else if (arr2[0] === 'userId') {
            this.userId = arr2[1]
          } else if (arr2[0] === 'roleId') {
            this.roleId = arr2[1]
          }
        }
      }
    },
    // 获取区域列表；
    getAreaList: function () {
      axios.get(this.ip + '/api/elevator/area/list?operator_user_id=' + this.userId)
        .then(this.getAreaListDataSucc)
    },
    getAreaListDataSucc: function (res) {
      this.areaList = res.data.area_list
      // console.log(this.areaList)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  @import '../../../assets/styles/varibles.styl'
  .border-top-bottom{
    border-bottom: 1px solid #ccc;
  }
  .list{
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .title{
    line-height: 0.6rem;
    background: #eee;
    padding-left: 0.2rem;
    color: #666;
    font-size: 0.26rem;
  }
  .button-list{
    padding:0.1rem -.6rem 0.1rem 0.1rem;
    height: 0.6rem;
  }
  .button-wrapper{
    width: 36%;
  }
  .button{
    padding: 0.1rem;
    text-align: center;
    margin: 0.1rem;
    border: 1.5px solid  $bgColor;
    border-radius: 0.1rem;
    overflow: hidden;
  }

</style>
